<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付页面</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="car.css">
    <link rel="stylesheet" href="apply.css">

</head>

<body>
    <!-- 所有页面共有头部 -->
    <header>
        <div class="nav">
            <!-- 头部左侧文字链接 -->
            <ul class="nav-left">
                <li class="conweixin">
                    <a href="javascript:;">关注</a>
                    <div class="weixin">
                        <div class="weixin-con">
                            <img src="img/weChat.jpg" alt="">
                            <p>关注公众号</p>
                        </div>
                    </div>
                </li>
                <li class="loadapp">
                    <a href="javascript:;">下载APP</a>
                    <div class="app">
                        <div class="app-con">
                            <img src="img/app.jpg" alt="">
                            <p>优购app下载</p>
                        </div>
                    </div>
                </li>
            </ul>

            <!-- 头部右侧文字链接 -->
            <ul class="nav-right">
                <li class="first">
                    <a href="javascript:;" class="mylist">我的订单</a>
                </li>
                <li><a href="index.html">回到首页</a></li>
                <li class="collect">
                    <a href="javascript:;"><i></i>收藏</a>
                </li>
                <li class="bag">
                    <a href="javascript:;"><i></i>购物袋</a>
                </li>
                <li class="publicword">
                    <a href="javascript:;">公告</a>
                    <div class="public">
                        <ul class="public-con">
                            <li><a href="javascript:;" class="red">近期物流情况安排通知</a></li>
                            <li><a href="javascript:;">优购客服电话变更</a></li>
                            <li><a href="javascript:;">关闭分享购频道</a></li>
                            <li><a href="javascript:;">提醒会员谨防诈骗电话</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </header>

    <div class="carlogo">
        <h1><img src="img/carlogo.png" alt=""></h1>
        <ul class="carlogo-right">
            <li>
                我的购物袋
                <i></i>
                <b></b>
            </li>
            <li class="focus">
                提交订单中心
                <i></i>
                <b></b>
            </li>
            <li>
                成功提价订单
                <i></i>
                <b></b>
            </li>
        </ul>
    </div>

    <div class="address">
        <div class="title">
            <h2>请填写您的收货地址</h2>
            <p><a href="javascript:;" class="backcar">返回购物车</a></p>
        </div>
        <div class="bigtable">
            <table>
                <tbody>
                    <tr>
                        <td class="tdleft"><label for="person">收货人姓名*</label></td>
                        <td>
                            <input type="text" id="person">
                            <span>（请使用真实姓名，不能全部是数字/英文/包含特殊符号（括号、井号等））</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="tdleft">收货人地址*</td>
                        <td>
                            <select name="" id="province"></select>
                            <select name="" id="city"></select>
                            <select name="" id="area"></select>
                        </td>
                    </tr>
                    <tr>
                        <td class="tdleft"></td>
                        <td>
                            <input type="text" id="xiangxi">
                            <span>（请填写详细地址，确保准确送达）</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="tdleft"><label for="phone">收货人手机*</label></td>
                        <td><input type="text" id="phone"></td>
                    </tr>
                    <tr>
                        <td class="tdleft">收货时间：*</td>
                        <td>
                            <select name="" id="" style="margin-left: 0;">
                            <option value="1" selected>只工作日送货(双休日、假日不用送)</option>
                            <option value="2">工作日、双休日与假日均可送货</option>
                            <option value="3">只双休日、假日送货(工作日不用送)</option>
                        </select>
                            <span>（送货时间仅供参考，快递公司会尽量满足您的要求）</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>


    <div class="ok">
        <h2>确认订单信息</h2>
        <table class="car">
            <colgroup>
                <col width="100">
                <col width="300">
                <col width="130">
                <col width="150">
                <col width="130">
                <col width="180">
            </colgroup>
            <thead>
                <tr>
                    <th>商品图</th>
                    <th>商品名称</th>
                    <th>颜色尺码</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计(元)</th>
                </tr>
            </thead>
            <tbody>
                <% applys.forEach(function(item){ %>

                    <tr id="<%= item.id %>">
                        <td class="choose">
                            <img src="<%= item.img %>" alt="">
                        </td>
                        <td class="gname">
                            <%= item.gname %>
                        </td>
                        <td class="cs">
                            <p class="gcolor">颜色：<span>图片色</span></p>
                            <p class="gsize">尺码：<span>F</span></p>
                        </td>

                        <td class="gprice">
                            <%= item.gprice %>
                        </td>
                        <td class="gcount">
                            <%= item.count %>
                        </td>
                        <td class="sum">
                            <%= item.sum %>
                        </td>
                    </tr>
                    <% }) %>

            </tbody>
        </table>
        <div class="success">
            <button class="successbtn">确认支付</button>
        </div>
    </div>
</body>

</html>

<script src="jquery.min.js"></script>
<script src="index.js"></script>
<script src="citys.js"></script>

<script>
    //省市区三级联动
    let province = document.getElementById("province");
    let city = document.getElementById("city");
    // 初始化省份
    cities.forEach(item => {
        let provinceName = item.provinceName;
        let option = document.createElement("option")
        option.innerHTML = provinceName;
        province.appendChild(option);
    });
    // 根据数组生成城市节点
    function createCity(cityData) {
        // 清空已有数据
        let city = document.getElementById("city");
        city.innerHTML = "";
        // 根据形参生成option节点插入到城市select标签中
        cityData.forEach(item => {
            let cityName = item.cityName;
            let option = document.createElement("option")
            option.innerHTML = cityName;
            city.appendChild(option);
        })
    }
    // 根据数组生成区节点
    function createArea(areaData) {
        let area = document.getElementById("area");
        area.innerHTML = "";
        areaData.forEach(item => {
            let option = document.createElement("option")
            option.innerHTML = item.areaName;
            area.appendChild(option)
        })
    }

    // 初始化城市
    let cityList = cities[0].mallCityList;
    createCity(cityList)

    // 初始化区
    let areaList = cityList[0].mallAreaList;
    createArea(areaList)



    province.onchange = function() {
        // selectedIndex是下拉选择菜单元素独有的一个属性
        // 返回当前选中的option标签相对于其他option的下标
        var cityList = cities[this.selectedIndex].mallCityList;
        createCity(cityList)
        createArea(cityList[0].mallAreaList)
    }

    city.onchange = function() {
        let areaList = cities[province.selectedIndex].mallCityList[this.selectedIndex].mallAreaList;
        createArea(areaList)
    }
</script>


<script>
    //当前页面

    //点击确认支付按钮
    $(".successbtn").click(function() {
        if ($("#person").val() && $("#xiangxi").val() && $("#phone").val()) {

            let username = sessionStorage.getItem("uname");
            let ispay = 1;

            $(".car tbody tr").each(function() {
                let gname = $(this).find(".gname").html();
                gname = gname.replace(/[ \n]/g, "");

                $.ajax({
                    url: "http://10.35.164.244:8080/order",
                    data: {
                        username,
                        ispay,
                        gname
                    },
                    success(data) {
                        if (data === "success") {
                            alert("支付成功，前往我的订单页")
                            location.href = "success.html";
                        }
                    }
                })
            })



            // console.log(tablecar);




        } else {
            alert("信息填写不完整，请重新填写")
        }


    })


    $(".backcar").click(function() {
        $(".bag a").attr("href", `/car?username=${uname}`);
    })

    $(".mylist").click(function() {
        let ispay = 1;

        $(this).attr("href", `/look?username=${uname}&ispay=${ispay}`)
    })
</script>